<template>
	<div>
		<!-- <div class="flex justify_content_between">
			<el-button size="small" type="primary" @click="add">创建</el-button>
			<div class="flex align_items_center">
				<span class="m_r_10">语言:</span>
				<el-select v-model="language" size="small" @change="getTableData">
					<el-option label="cn" value="cn">cn</el-option>
					<el-option label="en" value="en">en</el-option>
				</el-select>
			</div>
		</div> -->
		<div class="flex justify_content_between align_items_center  content-wrapper p_lr_20 m_b_20">
			<div>
				<h2>全球化布局</h2>
			</div>
			<div>
				<Language></Language>
			</div>
		</div>

		<div  class="content-wrapper p_20">
			<div class="back">
				<div class="d1" style="top:111px;left:303px"  @click="edit('text1')">{{this.tableData.text.text1}}</div>
				<div class="d1" style="top:111px;left:760px"  @click="edit('text2')">{{this.tableData.text.text2}}</div>
				<div class="d2" style="top:231px;left:553px"  @click="edit('text3')">{{this.tableData.text.text3}}</div>
				<div class="d3" style="top:198px;left:793px"  @click="edit('text4')">{{this.tableData.text.text4}}</div>
				<div class="d4" style="top:271px;left:779px"  @click="edit('text5')">{{this.tableData.text.text5}}</div>
				<div class="d5" style="top:508px;left:1042px" @click="edit('text6')">{{this.tableData.text.text6}}</div>
				<div class="d6" style="top:567px;left:1035px" @click="edit('text7')">{{this.tableData.text.text7}}</div>
				<div class="d4" style="top:521px;left:353px"  @click="edit('text8')">{{this.tableData.text.text8}}</div>
			</div>
		</div>
			<Edit ref="Edit"></Edit>
	</div>
</template>
<script type="text/javascript">
	import methods from './method'
	import Edit from './edit/edit'

	export default {
		data() {
			return {
				tableData: {
						text:{
							text1:'',
							text2:'',
							text3:'',
							text4:'',
							text5:'',
							text6:'',
							text7:'',
							text8:'',
						}
					}, //列表数据
				total: '', //数据总条数  
				language:'cn',
				id:1,
			}
		},
		methods: methods,
		components:{
			Edit
		},
		mounted() {
			this.getTableData()
		}
	}
</script>

<style scoped>
	.back {
		width: 1500px;
		height: 800px;
		background: url(../../../assets/imgs/globalization.jpg) no-repeat;
		background-size: contain;
		position: relative;
	}
	
	.back div {
		position: absolute;
		color:#fff;
		padding: 10px;
		box-sizing: border-box;
		/* border: 1px solid #FFFFFF; */
	}
	
	.back .d1 {
		width: 297px;
		height: 67px;
	}
	.back .d2 {
		width: 151px;
		height: 46px;
	}
	
	.back .d3 {
		width: 200px;
		height: 46px;
	}
	.back .d4 {
		width: 187px;
		height: 46px;
	}
	.back .d5 {
		width: 227px;
		height: 33px;
	}
	.back .d6 {
		width: 174px;
		height: 46px;
	}
</style>